<template>
  <div class="home">
    <nav-bar :title="'登录'" />
    <!-- 登陆表单 -->
    <van-form validate-first @failed="onFailed" @submit="handlerLogin">
      <div class="logo">
        <div class="logo1">
          <img
            src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=183326193,1784969774&fm=26&gp=0.jpg"
          >
        </div>
      </div>
      <div class="form">
        <van-field
          v-model="loginForm.username"
          label="用户名"
          name="pattern"
          placeholder="请输入用户名"
          :rules="[{ pattern, message: '请输入5~10位' }]"
        >
          <template #left-icon>
            <i class="icon iconfont icon-zhanghu" />
          </template>
        </van-field>
        <van-field
          v-model="loginForm.password"
          label="密码"
          name="pattern"
          placeholder="请输入密码"
          :rules="[{ pattern, message: '请输入5~10位' }]"
          :type="passwordType?'password':'number'"
        >
          <template #left-icon>
            <i class="icon iconfont icon-mima" />
          </template>
          <template #right-icon>
            <i class="icon iconfont icon-yanjing" @click="passwordType=!passwordType" />
          </template>
        </van-field>
        <div style="margin: 8rem 3rem 5rem 3rem;">
          <van-button block type="primary" native-type="submit">登录</van-button>
        </div>
      </div>
    </van-form>

    <!-- 下引导 -->
    <div class="info">
      <div class="left" @click="redirectedForgotPassword()">找回密码</div>
      <i>|</i>
      <div class="right" @click="redirectedRegistration()">用户注册</div>
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/common/NavBar.vue'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      loginForm: {
        username: '123456',
        password: '123456'
      },
      pattern: /^[\da-zA-Z!@#$%^&*]{5,10}$/,
      passwordType: true
    }
  },
  methods: {
    handlerLogin() {
      this.$notify({ type: 'success', message: '登录成功!' })
      this.$router.push('/home')
    },
    onFailed() {
      this.$notify({ type: 'warning', message: '请正确输入内容!' })
    },
    redirectedForgotPassword() {
      this.$router.push('/forgotPassword')
    },
    redirectedRegistration() {
      this.$router.push('/registration')
    }
  }
}
</script>
<style lang="less" scoped>
.logo {
  width: 100%;
  height: 5rem;
  display: flex;
  justify-content: center;
  margin: 5rem 0;
}
.logo1 {
  height: 6rem;
  width: 6rem;
  border: 0.1rem solid #eee;
  border-radius: 50%;
  padding: 0.2rem;
  box-shadow: 0 0 0.25rem #ddd;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
}
.info {
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 1.1rem;
  i {
    margin: 0 0.5rem;
  }
}
</style>
